<template>
    <div class="edit-down-table">
        <vxe-pulldown class="edit-down-pulldown" ref="xDown" transfer>
            <template #default>
                <vxe-input type="text" style="width: 100%;"  v-model="row[column.property]" @click="clickEvent" @focus="clickEvent" ></vxe-input>
            </template>
            <template #dropdown>
                <div class="edit-down-wrapper">
                    <vxe-textarea type="textarea"  v-bind:="textareaOpts" v-model="row[column.property]"></vxe-textarea>
                </div>
            </template>
        </vxe-pulldown>
    </div>
</template>

<script>

    export default {
        name: 'EditDownTextarea',
        props: {
            params: {
                type: Object,
                default: {row: {}, column: {}}
            },
            textareaOpts: {
                type: Object,
                default: {},
            }
        },
        data() {
            return {
                row: {},
                column: {}
            }
        },
        watch: {
            params: {
                handler(val) {
                    this.row = val.row || {}
                    this.column = val.column || {}
                },
                immediate: true
            }
        },
        mounted() {

        },
        methods: {
            clickEvent() {
                const $pulldown = this.$refs.xDown;
                $pulldown.showPanel()
            },
        }
    }
</script>

<style lang="scss" scoped>
    .edit-down-pulldown {
        width: 100%;
    }

    .edit-down-wrapper {
        background-color: #fff;
        border: 1px solid #dcdfe6;
        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
    }
</style>
